import React, { FC, useState } from 'react';
import type { RadioChangeEvent } from 'antd';
import { message, Radio, Space } from 'antd';

const ChoiceContent: FC<any> = ({ problem }) => {

  const [value, setValue] = useState("");

  const onChange = (e: RadioChangeEvent) => {
    var choice = problem[""+e.target.value];
    if(problem.answer === choice){
      message.success("答案正确");
    }else{
      message.error("答案错误");
    }
    setValue(e.target.value);

  };

  return (
    <>
      <Radio.Group onChange={onChange} value={value} buttonStyle="solid">
        <Space direction="vertical">
          <Radio.Button value={"choiceA"} style={{width: 300, borderRadius: 3}}>{problem.choiceA}</Radio.Button>
          <Radio.Button value={"choiceB"} style={{width: 300, borderRadius: 3}}>{problem.choiceB}</Radio.Button>
          <Radio.Button value={"choiceC"} style={{width: 300, borderRadius: 3}}>{problem.choiceC}</Radio.Button>
          <Radio.Button value={"choiceD"} style={{width: 300, borderRadius: 3}}>{problem.choiceD}</Radio.Button>
        </Space>
      </Radio.Group>
    </>
  );
};

export default ChoiceContent;